<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <h3>{{ appTitle }}</h3>
      </div>

      <div class="login-form">
        <div class="form-group">
          <a-input
              v-model="login.username"
              placeholder="请输入账号"
              allow-clear
              class="form-control"
          >
            <template #prefix>
              <icon-user class="input-icon" />
            </template>
          </a-input>
        </div>

        <div class="form-group">
          <a-input-password
              v-model="login.password"
              placeholder="请输入密码"
              allow-clear
              class="form-control"
          >
            <template #prefix>
              <icon-lock class="input-icon" />
            </template>
          </a-input-password>
        </div>

        <div class="form-group">
          <a-button
              type="primary"
              class="login-btn"
              :loading="isLoading"
              @click="handleLogin"
          >
            登录
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, defineComponent, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { getSysLogin } from '../../api/login';
import { ElMessage } from 'element-plus';

// 组件配置
defineComponent({
  name: 'LoginPage',
  inheritAttrs: false
});

// 状态管理
const router = useRouter();
const appTitle = import.meta.env.VITE_APP_TITLE;
const login = ref({
  username: '',
  password: ''
});
const isLoading = ref(false);
const isFormValid = ref(false);

// 表单验证
watchEffect(() => {
  isFormValid.value = !!login.value.username && !!login.value.password;
});

// 登录处理
const handleLogin = async () => {
  if (!isFormValid.value) {
    ElMessage.warning('请输入账号和密码');
    return;
  }

  isLoading.value = true;

  try {
    const loginResponse = await getSysLogin(login.value);
    localStorage.setItem("Authorization", loginResponse.data.token);
    localStorage.setItem('loginData', JSON.stringify(loginResponse));
    router.push('/index');
  } catch (error) {
    ElMessage.error('登录失败，请检查账号密码');
    console.error('登录错误:', error);
  } finally {
    isLoading.value = false;
  }
};

// 键盘事件处理
const handleKeyPress = (e) => {
  if (e.key === 'Enter') {
    handleLogin();
  }
};

// 生命周期钩子
onMounted(() => {
  window.addEventListener('keyup', handleKeyPress);
});

onBeforeUnmount(() => {
  window.removeEventListener('keyup', handleKeyPress);
});
</script>

<style scoped lang="scss">
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../assets/images/background.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }
}

.login-card {
  position: relative;
  z-index: 1;
  width: 380px;
  background-color: white;
  border-radius: 12px;
  padding: 40px 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }
}

.login-header {
  margin-bottom: 30px;

  h3 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    text-align: center;
  }
}

.login-form {
  .form-group {
    margin-bottom: 20px;

    .form-control {
      height: 44px;
      border-radius: 8px;
      border-color: #e0e0e0;

      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
      }
    }

    .input-icon {
      color: #999;
      margin-right: 8px;
    }
  }

  .login-btn {
    height: 46px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
